<script setup>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
import usersImport from '../../components/system/usersImport.vue'
import {
    setbackupProfile,
    getProfile,
    setSystemConfig,
} from '@/assets/api/system'
import { showMsg } from '@/assets/js/utils'
// import { showLoading } from '@/assets/js/loading'
// import { showMsg } from '@/assets/js/utils'

// const uploadUrl = config.baseApi + '/upload/upload_permit'
// const uploadHeaders = reactive({
//     Authorization: 'Bearer ' + userStore.token,
// })
// import { useUserStore } from '@/stores/index'
// const userStore = useUserStore()
// function getData() {
//     // showLoading()
//     getuserStore.systemInfo().then((res) => {
//         userStore.systemInfo.value = res.data
//         userStore.setGatewayPermit(res.data.gatewayPermit)
//     })
// }
// getData()
const formRules = reactive({
    name: [
        {
            required: true,
            message: '请输入名称',
        },
    ],
})
const form = reactive({
    name: userStore.systemInfo.gatewayName,
})
const formRef = ref(null)
// const uploadFileList = ref([])
// function onFileChange(uploadFile, uploadFiles) {
//     console.log('onFileRemove', uploadFile, uploadFiles)
//     uploadFileList.value = uploadFiles
//     console.log('onFileChange', uploadFileList.value[0])
// }
// function onFileRemove(uploadFile, uploadFiles) {
//     console.log('onFileRemove', uploadFile, uploadFiles)
//     uploadFileList.value = uploadFiles
// }
// 导入成功
// function importSuccess(res) {
//     console.log(res)
//     if (res.code == 1) {
//         showMsg(res.msg, 'error')
//         return
//     }
//     showMsg('导入成功')
// }
// // 导入失败
// function importError(err, file, fileList) {
//     console.log(err, file, fileList)
//     showMsg('导入失败', 'error')
// }
// const upload = ref()

// const handleExceed = (files) => {
//     upload.value.clearFiles()
//     const file = files[0]
//     file.uid = genFileId()
//     upload.value.handleStart(file)
// }

// const handleChange = (file) => {
//     console.log(file, 3333)
// }

// const handleSuccess = (val) => {
//     console.log('val', val)
// }
const usersImportVisible = ref(false)
const usersImportTitle = ref()
const fileTitle = ref()
const usersImportType = ref()
const editName = ref(false)
const submitUpload = (val) => {
    usersImportVisible.value = true
    usersImportTitle.value = val == 2 ? '许可上传' : '驱动上传'
    fileTitle.value = val == 2 ? '许可文件' : '驱动文件'
    usersImportType.value = val
    // console.log("upload.value", upload.value);
    // upload.value.submit()
}
// function resetAction() {}
// function saveAction() {}
function setBackups() {
    setbackupProfile().then(() => {
        showMsg('操作成功')
    })
}
function exportFile() {
    getProfile().then((res) => {
        window.open(res.data)
    })
}
function configureImport() {
    usersImportVisible.value = true
    usersImportType.value = 3
    usersImportTitle.value = '上传配置文件'
    fileTitle.value = '配置文件'
}
function setSystemInfoName() {
    setSystemConfig({ gateway_name: form.name }).then(() => {
        showMsg('操作成功')
        editName.value = false
        userStore.setSystemInfo({
            ...userStore.systemInfo,
            gatewayName: form.name,
        })
    })
}
</script>
<template>
    <div class="white-box d-flex-1">
        <el-form
            ref="formRef"
            :model="form"
            label-width="120px"
            size="large"
            :rules="formRules"
            class="mt-20"
        >
            <el-row :gutter="100">
                <el-col :span="12">
                    <el-form-item label="设备名称：" prop="name">
                        <!-- {{ userStore.systemInfo.gatewayName }} -->
                        <div class="d-flex">
                            <el-input
                                :disabled="!editName"
                                v-model="form.name"
                                @blur="setSystemInfoName"
                                placeholder="请输入"
                            />
                            <span
                                @click="editName = true"
                                class="icon fs-22 cursor ml-10"
                                title="编辑"
                                >&#xe63e;</span
                            >
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备编号：" prop="number">
                        {{ userStore.systemInfo.gatewayNumber }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备型号：">
                        {{ userStore.systemInfo.gatewayType }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备序列号：">
                        {{ userStore.systemInfo.gatewaySerialNumber }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="软件版本：">
                        {{ userStore.systemInfo.gatewayEdition }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="许可信息：">
                        {{ userStore.systemInfo.gatewayPermit }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="驱动解析：">
                        <el-button type="default" @click="submitUpload(1)"
                            >导入</el-button
                        >
                        <el-button class="ml-10" type="primary">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="版本升级：">
                        <!-- <el-upload
                            ref="upload"
                            class="upload-demo"
                            :action="uploadUrl"
                            :limit="1"
                            :show-file-list="true"
                            :on-success="importSuccess"
                            :on-error="importError"
                            :on-change="onFileChange"
                            :on-remove="onFileRemove"
                            :auto-upload="false"
                            :headers="uploadHeaders"
                            :file-list="uploadFileList"
                            :data="uploadFileList[0]"
                        > -->
                        <el-button type="primary">添加文件</el-button>
                        <!-- </el-upload> -->
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="备份与恢复：">
                        <el-button type="primary" @click="setBackups"
                            >配置备份</el-button
                        >
                        <el-button type="default" @click="exportFile"
                            >配置导出</el-button
                        >

                        <el-button
                            class="ml-10"
                            type="default"
                            @click="configureImport"
                        >
                            配置导入
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备许可：">
                        <el-button type="default" @click="submitUpload(2)"
                            >导入</el-button
                        >
                        <el-button class="ml-10" type="primary">重置</el-button>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="时间设置："> </el-form-item>
                </el-col> -->

                <!-- <el-col :span="24" class="text-right" style="margin-top: 100px">
                    <el-button type="default" @click="resetAction">
                        重置
                    </el-button>
                    <el-button type="primary" @click="saveAction">
                        保存
                    </el-button>
                </el-col> -->
            </el-row>
        </el-form>
        <usersImport
            v-model:visible="usersImportVisible"
            :usersImportTitle="usersImportTitle"
            :fileTitle="fileTitle"
            :usersImportType="usersImportType"
            v-if="usersImportVisible"
        ></usersImport>
    </div>
</template>
